import { Radio, ConfigProvider } from 'antd'
import * as React from 'react'
import { createRoot } from 'react-dom/client'
import zh_CN from 'antd/lib/locale-provider/zh_CN'

import ExpressionCreator, {
    Field,
    FieldType,
    OperatorKey,
    operator_map,
    field_allow_operator,
    components,
    Operator,
    Expression,
    ExpressionProvider,
} from '.'

// 字段类型扩展
type MyFieldType = FieldType | 'is_sex'

// 操作类型扩展
type MyOperatorKey = OperatorKey | 'regexp' | 'is_sex'
const my_operator_map: Record<MyOperatorKey, Operator<MyOperatorKey>> = {
    ...operator_map,
    regexp: {
        key: 'regexp',
        label: '正则',
        component: components.input,
    },
    is_sex: {
        key: 'is_sex',
        label: '是',
        component: (props) => {
            return <Radio.Group onChange={e => props.onChange(e.target.value)} value={props.value}>
                <Radio value="male">男</Radio>
                <Radio value="female">女</Radio>
            </Radio.Group>
        }
    }
}
// 配置字段类型对应操作
const my_allow_operator: Record<MyFieldType, MyOperatorKey[]> = {
    ...field_allow_operator,
    string: [].concat(field_allow_operator.string).concat(['regexp']),
    is_sex: ['is_sex'],
}

const fields: Field<MyFieldType>[] = [
    { name: 'name', title: '姓名', type: 'string'},
    { name: 'age', title: '年龄', type: 'number'},
    { name: 'hobby', title: '爱好', type: 'string'},
    { name: 'gender', title: '性别', type: 'is_sex'},
]


const App = () => {
    const { toExpression, toValue } = ExpressionProvider<MyOperatorKey>({ field: 'field1' })
    const [value, onChange] = React.useState({
        "relation": 1,
        "items": [
            {
                "field1": "name",
                "op": 2,
                "value": ["shannxi", "西安"]
            },
            {
                "field1": "age",
                "op": 8,
                "value": [18, 30]
            },
            {
                "relation": 1,
                "items": [
                    {
                        "field1": "age",
                        "op": 8,
                        "value": [12, 16]
                    },
                    {
                        "field1": "hobby",
                        "op": 2,

                    }
                ]
            },
            {
                "relation": 0,
                "items": [
                    {
                        "field1": "name",
                        "op": 0,
                        "value": "234"
                    },
                    {
                        "field1": "gender",
                        "op": 'is_sex',
                        "value": "male"
                    }
                ]
            }
        ]
    })
    return <ConfigProvider locale={zh_CN}>
        <ExpressionCreator
            fields={fields}
            op_map={my_operator_map}
            type_map={my_allow_operator}
            value={toExpression(value)}
            onChange={v => {
                onChange(toValue(v))
            }}
            deepth={3}
        />
    </ConfigProvider>

}
createRoot(document.getElementById('app')).render(<App />)